<template>
  <div>
    <el-card class="box-card">
      <p>当前有{{total}}道题目待审核</p>
      <!-- 审核表格 -->
      <el-table :data="examineData.items" style="width: 100%" border>
        <!-- 序号 -->
        <el-table-column type="index" label ></el-table-column>
        <el-table-column prop="number" label="试题编号" width="180px"></el-table-column>
        <el-table-column prop="subjectID" label="学科"></el-table-column>
        <el-table-column prop="questionType" width="100xp" label="题型"></el-table-column>
        <el-table-column prop="question" width="120px" label="题干"></el-table-column>
        <el-table-column label="录入时间" width="160px">
          <template slot-scope="scope">
            <div>{{scope.row.addDate | dateFormats}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" width="100px" label="录入人"></el-table-column>
        <el-table-column prop="difficulty" label="难度"></el-table-column>
        <el-table-column label="使用次数">20</el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.chkState===0" type="warning">
              待审核
            </el-tag>
            <el-tag v-if="scope.row.chkState===1" type="success">
              通过
            </el-tag>
            <el-tag v-if="scope.row.chkState===2" type="error">
              拒绝
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop = "chkRemarks" label="审核意见"></el-table-column>
        <el-table-column prop = "chkUser" label="审核人"></el-table-column>
        <el-table-column prop = "publishState" label="发布状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.publishState===0" type="warning">
              待发布
            </el-tag>
            <el-tag v-if="scope.row.publishState===1" type="success">
              已发布
            </el-tag>
            <el-tag v-if="scope.row.publishState===2" type="error">
              已下架
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <a href="javascript:;" @click.prevent="sh">审核</a>
            <a href="javascript:;" @click.prevent="yl">预览</a>
            <a href="javascript:;" @click.prevent="xj">下架</a>
            <a href="javascript:;" @click.prevent="xg">修改</a>
            <a href="javascript:;" @click.prevent="sc">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="block mT15">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { auditOpinions, choice } from '../../api/hmmm/questions'
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  created: function() {
    this.getExamines()
  },
  data() {
    return {
      num: 30,
      query: {
        page: 1,
        pagesize:1,
      },
      total: 1
    }
  },
  methods: {
    handleSizeChange(pagesize){
      this.query.pagesize = pagesize
      this.getExamines()

    },
    handleCurrentChange(page){
       this.query.page = page
       this.getExamines()
    },
    sh() {},
    yl() {},
    xj() {},
    xg() {},
    sc() {},
    ...mapActions(['getExamine']),
    //获得审核数据
    async getExamines() {
      await this.getExamine({
        choice,
        query: this.query
      })
      this.query.page = Number(this.examineData.page);
      this.total = this.examineData.counts;
    }
  },
  computed: {
    ...mapState({
      examineData: state => state.hmmm_store.examineData
    })
  }
}
</script>
<style scoped>
a {
  color: blue;
  margin-left: 10px;
}
.mT15 {
  margin-top: 15px;
  float: right;
  margin-bottom: 15px;
}
</style>